<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    新增用户
  </ng-template>

  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm" *ngIf="active">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="userName" nzRequired>
          <span>
            用户名
            <i nz-icon nz-tooltip nzTitle="请输入你的用户名" type="question-circle" theme="outline"></i>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input id="name" formControlName="name" [(ngModel)]="user.name" >
          <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入用户名!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phone" nzRequired>手机号码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phone']">
          <input formControlName="phone" id="'phone'" [(ngModel)]="user.phone" nz-input>
          <nz-form-explain *ngIf="validateForm.get('phone').dirty && validateForm.get('phone').errors">请输入手机号码!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="mail">E-mail</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="mail" id="mail" [(ngModel)]="user.mail">
          <nz-form-explain *ngIf="validateForm.get('mail').dirty && validateForm.get('mail').errors">不是有效的 E-mail!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input type="password" id="password" formControlName="password" [(ngModel)]="user.password" (ngModelChange)="updateConfirmValidator()">
          <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input type="password" formControlName="checkPassword" id="checkPassword">
          <nz-form-explain *ngIf="validateForm.get('checkPassword').dirty && validateForm.get('checkPassword').errors">
            <ng-container *ngIf="validateForm.get('checkPassword').hasError('required')">
              请输入确认密码!
            </ng-container>
            <ng-container *ngIf="validateForm.get('checkPassword').hasError('confirm')">
              两次密码不一致!
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button type="submit" [nzType]="'primary'" (click)="handleSave()"  [nzLoading]="isConfirmLoading">保存</button>
  </ng-template>
</nz-modal>
